<template>
	<view>
		<u-sticky bg-color="#fff">
			<u-tabs :list="list1" @click="clickTab" :current="status" lineColor="#AD0801" :activeStyle="{
            color: '#333333',
            fontWeight: 'bold'
        }" :inactiveStyle="{
            color: '#666666'
        }"></u-tabs>
		</u-sticky>
		<view class="u-p-30">
			<view class="u-r-16 u-bg-fff u-p-30 u-m-b-30" v-for="(item,index) in list"
				@click="$u.route('/pages/order/orderDetail?order_no='+item.order_no)">
				
				<view class="u-flex-y-center" v-for="(value,key) in item.detail">
					<image :src="value.image" style="width: 200rpx;height: 200rpx;border-radius: 16rpx;">
					</image>
					<view class="u-flex-1 u-m-l-30">
						<view class="u-flex-y-center u-flex-between">
							<view class="u-f-28 u-bold u-line-2 u-flex-1">{{value.name}}</view>
							<view class="u-m-l-20" style="text-align: right;">
								<view class="u-f-28" style="color: #FD6814;" >{{statusList[item.status]}}
								</view>
								<view class="u-f-28 " style="color: #999999;">x{{value.number}}</view>
							</view>
						</view>
						<view class="u-f-24 u-m-t-10" style="color: #999999;">{{value.attr_name}}</view>
						<u-gap height="40rpx"></u-gap>
						<view class="u-flex-y-center u-flex-between">
							<view style="color: #ED361D;">
								<text class="u-f-24">¥</text><text class="u-f-32">{{value.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 20rpx 0;justify-content: flex-end;" class="u-f-28 u-flex-y-center"
					>
					<block  v-if="item.status==0">
					<u-count-down :time="item.expire_time" format="HH:mm:ss"></u-count-down>
					<view>后订单关闭</view>
					</block>
				</view>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28"> </view>
					<view class="u-flex-y-center">
						<view class="btn" v-if="item.status==0||item.status==1" @click.stop="cancel(item.order_no)">取消订单</view>

						<view class="btn1"  v-if="item.status==0" @click.stop="pay(item.order_no)">去支付</view>
						<!-- <view class="btn1"  v-if="item.status==1" @click.stop="$u.route('/pages/order/sendSale?order_no='+item.order_no)">申请退款</view> -->
						<view class="btn"  v-if="item.status==2" @click.stop="$u.route('/pages/order/wuliu?order_no='+item.order_no)">查看物流</view>
						<!-- <view class="btn"  v-if="item.status==2" @click.stop="$u.route('/pages/order/sendSale?order_no='+item.order_no)">申请退款</view> -->
						<view class="btn1"  v-if="item.status==2" @click.stop="confirm(item.order_no)">确认收货</view>
						<!--<view class="btn"  v-if="item.status==3&&item.is_comment==0"  @click.stop="$u.route('/pages/order/orderTake?order_no='+item.order_no)">去评价</view>-->
					</view>
				</view>
			</view>
			<u-empty mode="order" v-if="list.length<1"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:0,
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '售后'
				}],
				list:[],
				page:1,
				statusList:['待支付','待发货','待收货','已完成','已取消','售后'],
				ispay:false
			}
		},
		onLoad(opt) {
			this.status = opt.status
			
		},
		onShow() {
			this.list = []
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			confirm(order_no){
			        var _this = this
			        uni.showModal({
			          title: '是否确认收货',
			          async success(result) {
			            if (result.confirm) {
			              await uni.$u.http.post('Order/orderConfirm',{order_no})
			              uni.$u.toast('操作成功')
			              _this.list = []
			              _this.page = 1
			              _this.getList()
			            }
			          }
			        })
			      },
			      cancel(order_no){
			        var _this = this
			        uni.showModal({
			          title: '是否取消订单',
			          async success(result) {
			            if (result.confirm) {
			              await uni.$u.http.post('Order/orderCancel',{order_no})
			              uni.$u.toast('操作成功')
			              _this.list = []
			              _this.page = 1
			              _this.getList()
			            }
			          }
			        })
			      },
				  clickTab(e){
					this.status = e.index
					this.list = []
					this.page = 1
					this.getList()
				  },
			async getList() {
				if(this.page == -1){
					return
				}
				let res = await uni.$u.http.post('order/orderLists', {
					page: this.page,
					status: this.status,
					
				});
				let ls = getApp().mergePage(res, this.page, this.list);
				this.list = ls.list
				this.page = ls.total
			},
			async pay(order_no) {
				if(this.ispay==true){
					return
				}
				let res = await uni.$u.http.post('order/pay', {
					order_no: order_no,
					type: 1
				});
				this.ispay = true
				let _this = this
				uni.requestPayment({
					"provider": "wxpay",
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success(res2) {
						uni.hideLoading()
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						setTimeout(function(){
							_this.list = []
							_this.page = 1
							_this.getList()
						},1000)
					},
					fail(e) {
						uni.hideLoading()
						_this.ispay = false
						uni.showToast({
							title: '支付失败,请重新支付',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-count-down__text {
		color: #ED361D !important;
	}

	page {
		background-color: #F8F8F8;
	}

	.btn {
		width: 170rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #E7E7E7;
		font-size: 28rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 18rpx;
	}

	.btn1 {
		width: 170rpx;
		height: 70rpx;
		background: #AD0801;
		border-radius: 8rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 18rpx;
	}
</style>